<template>
  <div>
    <div class="header">
      <van-nav-bar title="收支明细" left-arrow  >
        <van-icon name="arrow-left" slot="left" color="#333" @click="back"></van-icon>
        <span style="color: #333;" slot="right" @click="showTex">全部记录 <i class="iconfont icon-xiala2"></i></span>
      </van-nav-bar>
    </div>
    <!-- 收支记录弹出层内容 -->
    <van-popup v-model="show" position="top" :overlay="true">
      <div class="info">
        <div class="d1">全部记录</div>
        <div class="d1">收入记录</div>
        <div class="d2">支出记录</div>
        <div class="nav nav-border"></div>
        <div class="nav nav-background"></div>
      </div>
    </van-popup>
    <!-- 收支记录内容列表 -->
    <div class="content_box" v-for="item in list" :key="item.id">
      <div class="content_box1">
        <div>
          <span>流水号：{{item.num}}</span>
        </div>
        <div class="content_box_text1">{{item.tex}}</div>
      </div>
      <div class="content_box2">
        <div>
          <span class="content_box_text1">{{item.text}}</span>
        </div>
        <div class="content_box_text2">{{item.money}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "balanceofpayments",
  data() {
    return {
      show: false,
      list: [
        {
          num: 2018071612121234,
          tex: "提现",
          text: "提现到尾号888",
          money: "+188"
        },
        {
          num: 2018071612121234,
          tex: "订单收入",
          text: "订单号1234567891234",
          money: "+188"
        },
        {
          num: 2018071612121234,
          tex: "奖励金",
          text: "XXX活动奖励",
          money: "+188"
        }
      ]
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    showTex() {
      this.show = !this.show;
    }
  }
};
</script>
<style lang="less" scoped>
.header {
  margin-bottom: 46px;
}
// 收支记录弹出层 样式
.van-popup--top {
  width: 25%;
  top: 50px;
  left: 83%;
  background: transparent;
}
.info {
  margin-top: 50px;
  position: relative;
  width: 180px;
  height: 190px;
  line-height: 50px;
  background: #fff;
  border-radius: 4px;
  text-align: center;
  color: #333;
  font-size: 28px;
  .d1 {
    border-bottom: 1px solid #e1e1e1;
  }
  .d1,
  .d2 {
    padding-top: 10px;
  }
  .nav {
    position: absolute;
    left: 80%;
    overflow: hidden;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid dashed dashed dashed;
  }
  .nav-border {
    top: -20px;
    border-color: transparent transparent #fff transparent;
  }
  .nav-background {
    top: -19px;
    border-color: transparent transparent #fff transparent;
  }
}

// 收支记录内容列表 样式
.content_box {
  font-size: 28px;
  padding: 0px 30px;
  background: #fff;
  border-bottom: 1px solid #e1e1e1;
  height: 122px;
  padding-top: 15px;
  .content_box1,
  .content_box2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .content_box_text1 {
    font-size: 24px;
  }
  .content_box_text2 {
    font-size: 48px;
  }
}
</style>
